<template>
  <div id="app">
    <van-tabs v-model="active">
        <van-tab title="默认"></van-tab>
        <van-tab title="上下结构"></van-tab>
        <van-tab title="FieldSelect"></van-tab>
        <van-tab title="FieldCheckBoxSelect"></van-tab>
    </van-tabs>
    <van-checkbox style="margin-top: 10px;margin-left: 5px" v-model="showDivider">分割线</van-checkbox>
    <van-divider></van-divider>
<!--    <ValidationObserver ref="validate">-->
<!--          <FieldText-->
<!--              v-model="textModel.fieldValue"-->
<!--              :label="textModel.label"-->
<!--              :type="'text'"-->
<!--              :scene="1"-->
<!--              :required="textModel.required"-->
<!--              :placeholder="textModel.placeholder"-->
<!--              :validateRules="'required'"-->
<!--              :fieldType="textModel.fieldType"-->
<!--          ></FieldText>-->
<!--    </ValidationObserver>-->
<!--     <ModuleFieldReactive v-model="obj" :fieldList="fieldList">-->
<!--       <template slot="kemu" slot-scope="scope">-->
<!--         <van-switch v-model="obj.kemu"></van-switch>-->
<!--       </template>-->
<!--     </ModuleFieldReactive>-->
<!--     <div>----------------------------------------</div>-->
<!--     <div>----------------------------------------</div>-->
<!--    :labelAlign="'left'"-->
<!--    :inputAlign="'right'"-->
<!--    :errorMessageAlign="'left'"-->
     <ModuleField ref="form"
                  :fieldList="showedFieldList"
                  @onCell="onCell"
                  :showDivider="showDivider"
                  :tipLocation="'right'"
     >
       <template slot="kemu" slot-scope="scope">
         <van-switch v-model="scope.row.fieldValue"></van-switch>
       </template>
       <template slot="crudView_crud" slot-scope="scope">
         <div @click="onScope(scope)">
           <div v-for="(moduleList,index) in ((scope.row.typeSecondShowPageList || [])[0] || {}).list" :key="index">
             <div>
               序号: {{index}}
             </div>
              <div v-for="(field,key) in moduleList">

              </div>
           </div>
         </div>
       </template>
      <!--  远程搜索item样式自定义     -->
       <template slot="checkBoxSelectItem_tree" slot-scope="scope">
          <div style="text-align: left">
            <div>考试名称 : {{scope.row.name}}</div>
            <div>考试id : {{scope.row.id}} </div>
          </div>
       </template>
     </ModuleField>
    <div style="margin: 16px;">
      <Button round block type="info" @click="onSubmit">提交</Button>
    </div>
  </div>
</template>

<script>
import {Form,Button} from 'vant'
import {fieldList,fieldListLabelTop,fieldSelectList,fieldCheckBoxSelectList} from "../config";

export default {
  name: 'App',
  components: {
    Form,Button
  },
  data(){
    return{
      textModel:{
        label:'考试标题',
        type:'text',
        fieldValue:'',
        fieldName:'title',
        fieldType:'text',
        required:true,
        // placeholder:'请输入考试标题',
        config:{}
      },
      obj:{
      },
      active:0,
      showDivider:false,
      defaultFieldList:fieldList,
      labelTopFieldList:fieldListLabelTop,
      fieldSelectOption:fieldSelectList,
      fieldCheckBoxSelectOption:fieldCheckBoxSelectList
    }
  },
  computed:{
    showedFieldList(){
      if (this.active === 0) {
        return this.defaultFieldList
      } else if (this.active === 1) {
        return this.labelTopFieldList
      } else if (this.active === 2){
        return this.fieldSelectOption
      } else if (this.active === 3) {
        return this.fieldCheckBoxSelectOption
      }
    }
  },
  methods:{
    onScope(scope){
      scope.row.crudEditFunc(scope.row.typeSecondShowPageList[0],0,0)
    },
    onSubmit(){
        this.$refs.form
            .validate()
            .then(success=>{
                if (success) {
                  this.$toast('可以提交了')
                } else {
                  //提示第一个
                  let errors = this.$refs.form.getValidOb().refs
                  console.log('validate',this.$refs.form.getValidOb())
                  let errorFirstKey = Object.keys(errors).find(key => {
                    //console.log(key,errors[key].errors)
                    return errors[key].errors.length > 0
                  })
                  if (!errorFirstKey){

                    this.$refs.form.getValidOb().observers.every(ob=>{
                      let key = Object.keys(ob.refs).find(key=>{
                        return ob.refs[key].errors.length>0
                      })
                      if (key){
                        this.$toast.fail({message: ob.refs[key].errors[0]})
                        return false
                      }else {
                        return true
                      }
                    })

                  } else{
                    this.$toast.fail({message: errors[errorFirstKey].errors[0]})
                  }
                }
            })
    },
    onCell(fieldVal,item,preVal){
      console.log(item)
      console.log(preVal)
      if (item.fieldName === 'title') {
        const titleCopy = this.showedFieldList.find(item=>item.fieldName === 'titleCopy') || {}
        titleCopy.fieldValue = fieldVal
      }
    }
  },
  watch:{
    'obj.title'(newVal){
      console.log('startCopy')
      this.obj.titleCopy = newVal
      this.obj.type = {
        name:'type'+newVal,
        id:'222'
      }
    },
    watch:{
      active(){
        if (this.active === 1) {

        } else {

        }
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/
}
</style>
